<template>
  <div>
    <el-container>
      <el-main>
        <el-dialog
          title="提示"
          :visible.sync="dialogVisibleUpload"
          width="30%"
        >
          <span>确定上传吗？</span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibleUpload = false">取 消</el-button>
            <el-button type="primary" @click="uploadBriefIntroductionOfEnrollment">确 定</el-button>
          </span>
        </el-dialog>
        <el-card v-if="flagUpload" class="introduction_card">
          <div slot="header">
            <span class="text" style="font-weight: bold;margin-bottom: 50%;margin-top: 50%">{{ briefIntroductionOfEnrollment.year+'年'+briefIntroductionOfEnrollment.quarter }}招生简章</span>
            <el-button type="text" style="float: right" @click="changeView">查看招生简章列表</el-button>
          </div>
          <el-form :rules="rules" :model="briefIntroductionOfEnrollment" ref="briefIntroductionOfEnrollment" hide-required-asterisk="true">
            <el-form-item label="年份" prop="year">
              <div>
                <el-date-picker
                  v-model="briefIntroductionOfEnrollment.year"
                  type="year"
                  value-format="yyyy"
                  placeholder="请选择年份"
                />
              </div>
            </el-form-item>
            <el-form-item label="季度" prop="quarter">
              <el-select v-model="briefIntroductionOfEnrollment.quarter" placeholder="请选择季度">
                <el-option
                  v-for="item in quarterOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
<!--            <el-form-item label="类型" prop="type">-->
<!--              <el-select v-model="briefIntroductionOfEnrollment.type" placeholder="请选择简章类型" @change="checkFlag">-->
<!--                <el-option-->
<!--                  v-for="item in typeOptions"-->
<!--                  :key="item.value"-->
<!--                  :label="item.label"-->
<!--                  :value="item.value"-->
<!--                />-->
<!--              </el-select>-->
<!--            </el-form-item>-->
            <el-form-item label="班级" prop="cid">
              <el-select v-model="briefIntroductionOfEnrollment.cid" multiple collapse-tags placeholder="请选择招生班级">
                <el-option
                  v-for="item in classList"
                  :key="item.cid"
                  :label="item.className"
                  :value="item.cid"
                />
                <el-pagination
                  small
                  layout="prev, pager, next"
                  :current-page="selectPage.pageNum"
                  :total="selectPage.totalSize"
                  @current-change="handleSelectCurrentChange"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="截止日期" prop="signUpDeadLine" v-if="flagTime==true">
              <el-date-picker
                v-model="briefIntroductionOfEnrollment.signUpDeadline"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间">
              </el-date-picker>
            </el-form-item>
<!--            <el-form-item label="招生介绍" prop="introduction">-->
<!--              <template>-->
<!--                <dev></dev>-->
<!--                <div style="padding-top: 50px; padding-bottom: 30px">-->
<!--                  <quill-editor ref="myQuillEditor" v-model="briefIntroductionOfEnrollment.content" style="height: 250px;" :options="editorOption">-->
<!--                    &lt;!&ndash; 自定义toolar &ndash;&gt;-->
<!--                    <div id="toolbar" slot="toolbar" class="toolbar">-->
<!--                      &lt;!&ndash; Add a bold button &ndash;&gt;-->
<!--                      <button class="ql-bold" title="加粗">Bold</button>-->
<!--                      <button class="ql-italic" title="斜体">Italic</button>-->
<!--                      <button class="ql-underline" title="下划线">underline</button>-->
<!--                      <button class="ql-strike" title="删除线">strike</button>-->
<!--                      <button class="ql-blockquote" title="引用" />-->
<!--                      <button class="ql-code-block" title="代码" />-->
<!--                      <button class="ql-header" value="1" title="标题1" />-->
<!--                      <button class="ql-header" value="2" title="标题2" />-->
<!--                      &lt;!&ndash;Add list &ndash;&gt;-->
<!--                      <button class="ql-list" value="ordered" title="有序列表" />-->
<!--                      <button class="ql-list" value="bullet" title="无序列表" />-->
<!--                      &lt;!&ndash; Add font size dropdown &ndash;&gt;-->
<!--                      <select class="ql-header" title="段落格式">-->
<!--                        <option selected>段落</option>-->
<!--                        <option value="1">标题1</option>-->
<!--                        <option value="2">标题2</option>-->
<!--                        <option value="3">标题3</option>-->
<!--                        <option value="4">标题4</option>-->
<!--                        <option value="5">标题5</option>-->
<!--                        <option value="6">标题6</option>-->
<!--                      </select>-->
<!--                      <select class="ql-size" title="字体大小">-->
<!--                        <option value="10px">10px</option>-->
<!--                        <option value="12px">12px</option>-->
<!--                        <option value="14px">14px</option>-->
<!--                        <option value="16px" selected>16px</option>-->
<!--                        <option value="18px">18px</option>-->
<!--                        <option value="20px">20px</option>-->
<!--                      </select>-->
<!--                      <select class="ql-font" title="字体">-->
<!--                        <option value="SimSun">宋体</option>-->
<!--                        <option value="SimHei">黑体</option>-->
<!--                        <option value="Microsoft-YaHei">微软雅黑</option>-->
<!--                        <option value="KaiTi">楷体</option>-->
<!--                        <option value="FangSong">仿宋</option>-->
<!--                        <option value="Arial">Arial</option>-->
<!--                      </select>-->
<!--                      <select class="ql-color" value="color" title="字体颜色" />-->
<!--                      <select class="ql-background" value="background" title="背景颜色" />-->
<!--                      <select class="ql-align" value="align" title="对齐" />-->
<!--                      <button class="ql-clean" title="还原" />-->
<!--                    </div>-->
<!--                  </quill-editor>-->
<!--                </div>-->
<!--              </template>-->
<!--            </el-form-item>-->
          </el-form>
          <el-button type="primary" style="margin-right: auto; float: right; margin-bottom: 10px" @click="submitForm('briefIntroductionOfEnrollment')">上传</el-button>
        </el-card>
        <el-card v-else-if="!flagUpload&&!flagDetail" class="introduction_card">
          <div slot="header">
            <span class="text" style="font-weight: bold;margin-bottom: 50%;margin-top: 50%">招生简章列表</span>
            <el-button type="primary" class="backButton" size="small" @click="changeView">返回</el-button>
          </div>
          <el-table :data="tableData" style="width: 100%" :show-overflow-tooltip="true">
            <el-table-column prop="year" label="年份">
              <template slot-scope="scope">
                {{ scope.row.year ? scope.row.year :'暂无' }}
              </template>
            </el-table-column>
            <el-table-column prop="quarter" label="季度">
              <template slot-scope="scope">
                {{ scope.row.quarter===1 ? '春季':scope.row.quarter===2 ?'夏季':scope.row.quarter===3 ?'秋季':scope.row.quarter===4 ?'冬季':暂无 }}
              </template>
            </el-table-column>
<!--            <el-table-column prop="year" label="类型" width="180">-->
<!--              <template slot-scope="scope">-->
<!--                {{ scope.row.type===0 ? '学校招生':scope.row.type===1?'教学班招生' :'暂无' }}-->
<!--              </template>-->
<!--            </el-table-column>-->
<!--            <el-table-column prop="content" label="招生简章">-->
<!--              <template slot-scope="scope">-->
<!--                {{ scope.row.content ? scope.row.content.replace(/<[^>]+>/g, "").substring(0,8)+'……' :'暂无' }}-->
<!--              </template>-->
<!--            </el-table-column>-->
            <el-table-column width="150px" label="操作">
              <template slot-scope="scope ">
                <el-button type="text" @click="handleClick(scope.row.bioeid)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :current-page="page.pageNum"
            :total="page.totalSize"
            @current-change="handleCurrentChange"
          />
        </el-card>
        <el-card v-else-if="flagDetail" class="introduction_card" style="height: 800px">
          <div slot="header">
            <span>{{ year+"年"+quarter+"招生简介" }}</span>
            <el-button class="backButton" type="primary" size="small" @click="handleClickBack">返回</el-button>
          </div>
          <p v-html="content" />
        </el-card>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import { getClass } from '../../../api/class'
import { preinstallInfo } from '../../../api/studentRecruitmentBrochure'
import { getEnrollmentInfo, getIntroductionOfEnrollment } from '../../../api/enroll'
import {
  Quill,
  quillEditor
} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import '../../../assets/css/font.css'
// 自定义字体大小
const Size = Quill.import('attributors/style/size')
Size.whitelist = ['10px', '12px', '14px', '16px', '18px', '20px']
Quill.register(Size, true)

// 自定义字体类型
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif',
  '宋体', '黑体'
]
var Font = Quill.import('formats/font')
Font.whitelist = fonts
Quill.register(Font, true)
export default {
  name: 'StudentRecruitmentBrochure',
  components: {
    quillEditor
  },
  data() {
    return {

      rules: {
        cid: [
          { required: true, message: '请选择招生班级', trigger: 'blur' }
        ]
        // signUpDeadLine: [
        //   { type: 'text', required: true, message: '请选择截止日期', trigger: 'change' }
        // ]
      },
      flagClass: false,
      tableData: [],
      quarter: '',
      year: '',
      type: '',
      flagUpload: true,
      flagDetail: false,
      flagTime: true,
      dialogVisibleUpload: false,
      content: null,
      page: {
        pageNum: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0
      },
      selectPage: {
        pageNum: 1,
        pageSize: 10,
        totalPage: 0,
        totalSize: 0
      },
      editorOption: {
        placeholder: '请输入',
        theme: 'snow', // or 'bubble'
        modules: {
          toolbar: {
            container: '#toolbar'
          }
        }
      },
      quarterOptions: [
        {
          value: '春季班',
          label: '春季班'
        },
        {
          value: '夏季班',
          label: '夏季班'
        },
        {
          value: '秋季班',
          label: '秋季班'
        },
        {
          value: '冬季班',
          label: '冬季班'
        }
      ],
      // typeOptions: [
      //   {
      //     value: 0,
      //     label: '学校'
      //   },
      //   {
      //     value: 1,
      //     label: '教学班'
      //   }
      //
      // ],
      classList: [],
      classOptions: [],
      briefIntroductionOfEnrollment: {
        bioeid: '',
        content: '',
        quarter: '春季班',
        year: '2020',
        cid: '',
        signUpDeadline: ''
      }
    }
  },
  created() {
    this.getClassList()
  },
  methods: {
    // 切换显示flag
    // checkFlag() {
    //   if (this.briefIntroductionOfEnrollment.type == 1) {
    //     this.flagClass = true
    //     this.flagTime = false
    //   } else {
    //     this.flagClass = false
    //     this.flagTime = true
    //   }
    // },
    // 获得班级列表
    getClassList() {
      getClass({
        classState: '1',
        pageNum: this.selectPage.pageNum,
        pageSize: this.selectPage.pageSize
      }).then(res => {
        console.log('da', res.data)
        this.classList = res.data.list
        this.selectPage = res.data.page
        console.log('list1', this.classList)
      })
        .catch(err => {
          console.log('获取班级列表失败！')
          console.log('list', this.classOptions)
        })
    },
    // 切换显示
    changeView() {
      this.flagUpload = !this.flagUpload
      if (this.flagUpload == false) {
        this.getIntroductionOfEnrollmentList()
      }
    },
    // 返回列表
    handleClickBack() {
      this.flagDetail = false
    },
    // 获取招生简章详情
    handleClick(bioeid) {
      console.log(bioeid)
      getEnrollmentInfo(bioeid).then(res => {
        this.content = res.data.content
        this.year = res.data.year
        switch (res.data.quarter) {
          case '1':
            this.quarter = '春季班'
            break
          case '2':
            this.quarter = '夏季班'
            break
          case '3':
            this.quarter = '秋季班'
            break
          case '4':
            this.quarter = '冬季班'
            break
        }
        this.type = res.data.type
        this.flagDetail = true
        this.$message.success('获取招生简章内容成功！')
      })
        .catch(err => {
          this.$message.error('获取招生简章内容失败！')
        })
    },
    // 获取招生简章列表
    getIntroductionOfEnrollmentList() {
      getIntroductionOfEnrollment({
        pageNum: this.page.pageNum,
        pageSize: this.page.pageSize
      }).then(res => {
        this.tableData = res.data.list
        this.page = res.data.page
        this.$message.success('请求招生简章列表成功！')
      })
        .catch(err => {
          this.$message.error('请求招生简章列表失败！')
        })
    },
    handleSelectCurrentChange(val) {
      this.selectPage.pageNum = val
      this.getClassList()
    },
    handleCurrentChange(val) {
      this.page.pageNum = val
      this.getIntroductionOfEnrollmentList()
    },
    // 打开弹窗
    openDialog() {
      this.dialogVisibleUpload = true
    },
    // 上传招生简章
    uploadBriefIntroductionOfEnrollment() {
      const uploadDate = this.briefIntroductionOfEnrollment
      console.log('data', uploadDate)
      switch (this.briefIntroductionOfEnrollment.quarter) {
        case '春季班':
          uploadDate.quarter = '1'
          break
        case '夏季班':
          uploadDate.quarter = '2'
          break
        case '秋季班':
          uploadDate.quarter = '3'
          break
        case '冬季班':
          uploadDate.quarter = '4'
          break
      }
      preinstallInfo(
        uploadDate
        // year: this.briefIntroductionOfEnrollment.year,
        // quarter: this.briefIntroductionOfEnrollment.quarter,
        // content: this.briefIntroductionOfEnrollment.content,
        // type: this.briefIntroductionOfEnrollment.type,
        // cid: this.briefIntroductionOfEnrollment.cid
      ).then(res => {
        this.$message.success('上传招生简介成功！')
        this.briefIntroductionOfEnrollment.year = '2020'
        this.briefIntroductionOfEnrollment.quarter = '春季班'
        this.briefIntroductionOfEnrollment.type = 0
        this.dialogVisibleUpload = false
      }).catch(res => {
        this.$message.error('上传招生简介失败！ ')
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.openDialog()
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.introduction_card{
  width: 1000px;
  margin-left:auto;
  margin-right:auto;
}
  .toolbar{
    vertical-align: middle;
  }
  .backButton{
    margin-right: 10px;
    float: right
  }
</style>
